<template>
  <table class="my-table">
    <thead>
      <tr>
        <slot name="head"></slot>
        <!-- 
          <th>编号</th>
          <th>名称</th>
          <th>图片</th>
          <th width="100px">标签</th>
        -->
      </tr>
    </thead>
    <tbody>
      <tr v-for="v, i of data" :key="v.id">

        <!-- <slot name="body"></slot> -->
        <slot :index="i" :row="v"></slot>

        <!--
        <td>{{ i + 1 }}</td>
        <td>{{ v.name }}</td>
        <td>
          <img :src="v.picture" />
        </td>
        <td>
          插槽和属性的取舍：看是否涉及到结构，如果有，则用插槽，没有，则用prop
          <MyTag :text="parentText" @update:text="parentText = $event" />
          <MyTag :text.sync="parentText" />
          <MyTag :text.sync="v.tag" />
        </td>
        -->
      </tr>
    </tbody>
  </table>
</template>

<script>
// import MyTag from './MyTag.vue'

export default {
  name: 'MyTable',
  // components: {
  //   MyTag
  // },
  props: {
    // 这个 data 是一个 prop
    data: {
      type: Array,
      // 扩展：如果默认值 是一个复杂数据类型 那么 也要和 data 一样，定义成一个函数 返回该默认值
      default: () => []
    }
  }
}
</script>

<style lang="less">
.table-case {
  width: 1000px;
  margin: 50px auto;
  img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    vertical-align: middle;
  }

  .my-table {
    width: 100%;
    border-spacing: 0;
    img {
      width: 100px;
      height: 100px;
      object-fit: contain;
      vertical-align: middle;
    }
    th {
      background: #f5f5f5;
      border-bottom: 2px solid #069;
    }
    td {
      border-bottom: 1px dashed #ccc;
    }
    td,
    th {
      text-align: center;
      padding: 10px;
      transition: all 0.5s;
      &.red {
        color: red;
      }
    }
    .none {
      height: 100px;
      line-height: 100px;
      color: #999;
    }
  }
  
}
</style>